<script setup>
import { computed } from "vue";
import "echarts-wordcloud";

const data = [
  { name: "Anti-War（反战）", value: 527480 },
  { name: "社会治安", value: 8272 },
  { name: "American politician（美政要）", value: 2028 },
  { name: "弥合分歧", value: 30394 },
  { name: "涉美军将领敏感议题", value: 13048 },
  { name: "社会经济", value: 13974 },
  { name: "Elections（选举）", value: 2260 },
  { name: "Culture（文化）", value: 23764 },
  { name: "少数弱势群体权益", value: 0 },
  { name: "民进党滥用公权力", value: 126 },
  { name: "Healthcare（医疗保健）", value: 1176 },
  { name: "台军丑闻弊案", value: 0 },
  { name: "自然灾害", value: 72 },
  { name: "兵役争议", value: 4146 },
  { name: "台军战争潜力不足", value: 0 },
  { name: "民进党执政不力", value: 1946 },
  { name: "民进党黑金政治", value: 35870 },
  { name: "能源改革", value: 26844 },
  { name: "台军内部矛盾", value: 0 },
  { name: "台社会疑美", value: 448854 },
  { name: "社会分化", value: 0 },
  { name: "Abortion(堕胎)", value: 2946 },
  { name: "台军后勤保障不力", value: 810132 },
  { name: "台军价值观不统一", value: 0 },
  { name: "Polarization（两极分化）", value: 8404 },
  { name: "Foreign Policy（外交政策）", value: 247730 },
  { name: "枪支", value: 724 },
  { name: "台军福利待遇欠佳", value: 130 },
  { name: "司法改革", value: 0 },
  { name: "台军战争压力大", value: 3700 },
  { name: "食品安全", value: 286 },
  { name: "”台独“引发战争危险", value: 30928 },
  { name: "台军事行动受挫", value: 0 },
  { name: "民进党黑金政治", value: 99999999 },
  { name: "台社会疑美", value: 99999998 },
  { name: "台军战争潜力不足", value: 99999997 },
];

const maxWordSize = computed(() => {
  if (!data.length) {
    return 60;
  }
  const lenList = data.map((item) => item.name.length);
  const len = Math.max(...lenList);
  if (len > 10) {
    return 20;
  } else if (len > 5) {
    return 40;
  } else {
    return 60;
  }
});

const option = computed(() => {
  return {
    tooltip: { show: false },
    series: [
      {
        type: "wordCloud",
        sizeRange: [14, maxWordSize.value],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        draoOutOfBound: false,
        emphasis: { shadowBlur: 10, shadowColor: "#333" },
        textStyle: {
          textBorderWidth: 1,
          textShadowBlur: 5,
          textShadowColor: "#6AE6FF",
          color: () => {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(",") +
              ")"
            );
          },
        },
        width: "100%",
        height: "100%",
        data,
      },
    ],
  };
});
</script>

<template>
  <div class="chart">
    <nf-charts :options="option" />
  </div>
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 300px;
}
</style>
